<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="css/app.css" />
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
		<style>
			@font-face {
				font-family: 'iconfont';
				/* project id 1571015 */
				src: url('//at.alicdn.com/t/font_1571015_6c2fwlg8tnj.eot');
				src: url('//at.alicdn.com/t/font_1571015_6c2fwlg8tnj.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_1571015_6c2fwlg8tnj.woff2') format('woff2'), url('//at.alicdn.com/t/font_1571015_6c2fwlg8tnj.woff') format('woff'), url('//at.alicdn.com/t/font_1571015_6c2fwlg8tnj.ttf') format('truetype'), url('//at.alicdn.com/t/font_1571015_6c2fwlg8tnj.svg#iconfont') format('svg');
			}
			
			.iconfont {
				font-family: "iconfont" !important;
				font-size: 16px;
				font-style: normal;
				-webkit-font-smoothing: antialiased;
				-webkit-text-stroke-width: 0.2px;
				-moz-osx-font-smoothing: grayscale;
			}
			
			.title {
				margin: 5px 0px 0px 0px;
				color: #6d6d72;
				font-size: 12px;
			}
			
			.oa-contact-cell.mui-table .mui-table-cell {
				padding: 11px 0;
				vertical-align: middle;
			}
			
			.oa-contact-cell {
				position: relative;
				margin: -11px 0;
			}
			
			.oa-contact-avatar {
				width: 75px;
			}
			
			.oa-contact-avatar img {
				border-radius: 50%;
			}
			
			.oa-contact-content {
				width: 100%;
			}
			
			.oa-contact-name {
				margin-right: 20px;
			}
			
			.oa-contact-name,
			oa-contact-position {
				float: left;
			}
			
			.note-list,
			.folder-list {
				padding: 10px 0 10px;
				border-bottom: dashed 1px #CACACD;
				flex-flow: column;
			}
			
			.title-weight {
				font-size: 16px;
				font-weight: bold;
				margin-bottom: 10px;
			}
		</style>
	</head>

	<body>
		<!--显示主体-->
		<div class="mui-content">
			<!--最新页面-->
			<div id="tabbar" class="mui-control-content mui-active">
			</div>
			<!--文件夹页面-->
			<div id="tabbar-with-chat" class="mui-control-content">
			</div>
			<!--我的页面-->
			<div id="tabbar-with-map" class="mui-control-content">

			</div>
		</div>
		<!--底部导航栏-->
		<nav class="mui-bar mui-bar-tab" id="db">
			<a class="mui-tab-item mui-active" href="#tabbar">
				<span class="mui-icon mui-icon-bars"></span>
				<span class="mui-tab-label">最新</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-chat">
				<span class="mui-icon iconfont">&#xe630;</span>
				<span class="mui-tab-label">文件夹</span>
			</a>
			<a class="mui-tab-item" href="#popover">
				<span class="mui-icon mui-icon-plus"></span>
				<span class="mui-tab-label">新建</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-map">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
		<!--添加弹出菜单-->
		<div id="popover" class="mui-popover">
			<ul class="mui-table-view mui-grid-view mui-grid-2">
				<li class="mui-table-view-cell mui-media mui-col-xs-5 mui-col-sm-5">
					<a href="new_note.html">
						<svg t="1576735014020" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7656" width="32" height="32">
							<path d="M764.628 0.01H139.304S60.662 1.064 49.88 90.49v831.529s-0.79 95.87 105.996 95.87h728.031s84.429-4.735 91.136-91.662V253.691l-64.965 69.568-0.526 629.137-794.839-0.789V64.318h581.926L764.628 0.011m78.905 44.055l98.106 76.407 20.515-27.354s15.518-20.516 0-45.37c0 0-14.334-23.672-38.532-37.218 0 0-32.877-18.016-54.708 3.683l-25.38 29.852m0 0" fill="#1296db" p-id="7657"></path>
							<path d="M910.603 160.846L743.455 382.7s-14.86 27.354-41.03 39.715l-73.908 35.376s-19.858 9.995-24.198-17.359l13.02-81.404s-1.184-14.86 18.674-41.03l177.01-234.217 97.58 77.064M291.855 577.07h437.923s14.335-3.683 13.677 20.515v20.12s-3.156 11.18-19.858 8.68l-427.403 0.395s-14.86 0.92-16.175-13.414v-26.302c0.131 0 2.498-9.994 11.836-9.994m0 162.807h437.923s14.335-3.682 13.677 20.516v20.12s-3.156 11.179-19.858 8.68l-427.403 0.395s-14.86 0.92-16.175-13.414v-26.302c0.131-0.131 2.498-9.995 11.836-9.995m0 0" fill="#1296db" p-id="7658"></path>
						</svg>
						<div class="mui-media-body">新建笔记</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-5 mui-col-sm-5">
					<a href="#">
						<svg t="1576734462110" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6653" width="32" height="32">
							<path d="M1024 910.222222a113.777778 113.777778 0 0 1-113.777778 113.777778H113.777778a113.777778 113.777778 0 0 1-113.777778-113.777778V113.777778a113.777778 113.777778 0 0 1 113.777778-113.777778h796.444444a113.777778 113.777778 0 0 1 113.777778 113.777778v796.444444z" fill="#3B88C3" p-id="6654"></path>
							<path d="M232.504889 259.555556c5.290667-31.744 39.68-67.896889 86.442667-67.896889 44.088889 0 78.506667 31.744 88.206222 63.488l104.078222 349.240889h1.763556L617.016889 255.146667c9.699556-31.744 44.088889-63.488 88.206222-63.488 46.705778 0 81.123556 36.152889 86.442667 67.896889l82.005333 492.145777c0.881778 5.290667 0.881778 10.581333 0.881778 14.961778 0 38.826667-28.216889 63.488-63.488 63.488-44.999111 0-62.606222-20.280889-68.778667-61.724444l-52.053333-358.940445h-1.763556l-105.841777 369.521778c-6.172444 21.162667-22.897778 51.143111-70.542223 51.143111-47.616 0-64.369778-29.980444-70.542222-51.143111l-105.841778-369.521778h-1.763555l-52.053334 358.968889c-6.172444 41.443556-23.808 61.724444-68.778666 61.724445-35.271111 0-63.488-24.661333-63.488-63.488 0-4.380444 0-9.699556 0.881778-14.961778L232.504889 259.555556z" fill="#FFFFFF" p-id="6655"></path>
						</svg>
						<div class="mui-media-body">Markdown</div>
					</a>
				</li>
			</ul>
		</div>
	</body>
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	<script src="js/mui.min.js"></script>
	<script src="js/update.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="js/tabbar.js"></script>
	<script>
		mui.init({
			swipeBack: true //启用右滑关闭功能

		});
		
		var token = null;
		
		document.getElementById(db).bgColor="#2a5caa";
		
		mui.plusReady(function() {
			token = plus.storage.getItem('accessToken');
			
			//加载页面
			$(function() {
				$("#tabbar-with-map").load("personal.html", function(response, status) {
					console.log(token);
					mui.ajax('http://338de254.cpolar.io/note-user/user/getUser', {
						data: {
							token: token,
							id: token
						},
						dataType: 'json', //服务器返回json格式数据
						crossDomain: true,
						type: 'post', //HTTP请求类型
						success: function(data) {
							console.log(data);
							document.getElementById('personname').innerText = data.nickname;
						}
					});
				})
				$("#tabbar").load("newest_note.html")
				$("#tabbar-with-chat").load("folder_page.html")
			})
			
		})
		
		window.addEventListener('refresh', function(e) {
			$(function() {
				$("#tabbar-with-map").load("personal.html")
			})
			//刷新调用方法
		})

		

		//跳转到查看页面的方法
		function turnPage() {
			mui.openWindow({
				url: 'show_note.html',
				extras: {
					myname: "youzai",
				}
			})
		}
	</script>

</html>